﻿@model TestOnlineProject.Models.Entities.TestModel
@using TestOnlineProject.Common
@using TestOnlineProject.Models.Entities
@{
    ViewBag.Title = "TestResult";
    Layout = "~/Views/Shared/_NoLayout.cshtml";
}
<script>
    $(document).ready(function () {
    });

    function SendReport(id) {
        $("#report_content").html("<input type=\"hidden\" name=\"questionId\" id=\"vio_questionId\" /> <div style=\"text-align: center\"> <input type=\"text\" name=\"message\" pattern=\".{5,100}\" required placeholder=\"Message\" title=\"The Message length is 5-100 characters.\" style=\"width: 330px\" /> <button type=\"submit\" value=\"Send\" class=\"btn\"> Send</button> </div>");
        $("#vio_questionId").val(id);
    }

    $(document).ready(function () {
        // Initial page.
        goToPage(1, @ViewBag.totalPage);
    });

    // Paging.
    function goToPage(page, totalPage) {
        $(".question").hide();
        $(".p" + page).show();
        window.location = "#top";
    }

</script>
@{
    if (Model != null)
    {
    <table id="top" class="table table-bordered" style="background: #F7F7F9">
        <tr>
            <td style="font-weight: bold">
                <div>
                    <span>Test Title: @Html.DisplayFor(model => model.Title)</span></div>
                <div>
                    <span>Subject: @Html.DisplayFor(model => model.Subject)</span></div>
                <div>
                    <span>Start Time: @Html.DisplayFor(model => model.StartTime)</span></div>
                <div>
                    <span>Finish Time: @Html.DisplayFor(model => model.FinishTime)</span></div>
                <div>
                    <span>Number of Questions: @Html.DisplayFor(model => model.NumberOfQuestions)</span></div>
                <div>
                    <span>Duration: @Html.DisplayFor(model => model.Duration) minutes</span></div>
                <div>
                    <span>Total Marks: @Model.Mark/@Model.Questions.Count (@(Math.Round(Model.Mark / Model.Questions.Count * 10, 2))/10)</span></div>
            </td>
        </tr>
    </table>
        var questionNo = 0;
        int i = 0;
        var totalPage = 0;
        foreach (var question in Model.Questions)
        {
            if (i % 10 == 0)
            {
                totalPage++;
            }
            i++;
            var pageClass = "p" + totalPage;

            var questionBase = (ViewBag.QuestionList as List<Question>).Where(q => q.QuestionId == question.QuestionId).FirstOrDefault();

    <table class="table @pageClass question" style="table-layout: fixed">
        <tr style="background-color: #D9EDF7; font-weight: bold">
            <td>
                <span>
                    @{
            questionNo++;
                        <span>Question</span>
                        @questionNo
                    }
                </span><span>| <a href="#myModal" role="button" data-toggle="modal" class="vio_report" onclick="SendReport('@question.QuestionId')">
                    <img src="@Url.Content("~/Images/report.gif")"/></a> </span>
            </td>
        </tr>
        <tr>
            <td>
                <span style="word-wrap: break-word">@Html.Raw(question.Content)</span>
            </td>
        </tr>
        @{
            var answerNo = 0;
            foreach (var answer in question.Answers)
            {
                // Single choice, multiple choice, true/false.
                if (question.QuestionTypeId == 1 || question.QuestionTypeId == 2 || question.QuestionTypeId == 4)
                {
            <tr>
                <td>
                    @{
                    answerNo++;
                        <span>@answerNo) </span>
                    }
                    <div style="display: inline-block">
                        <span style="word-wrap: break-word">@Html.Raw(answer.Content)</span>
                    </div>
                    @{
                    if (questionBase.Answers.Where(a => a.AnswerId == answer.AnswerId).FirstOrDefault().Grade > 0)
                    {
                        if (answer.Checked)
                        {

                        <span>
                            <img class="img-circle" src="@Url.Content("~/Images/valid.png")" style="height: 20px"/></span>
                        }
                        else
                        {
                        <span>
                            <img class="img-circle" src="@Url.Content("~/Images/valid.png")" style="height: 10px"/></span>
                        }
                    }
                    else
                    {
                        if (answer.Checked)
                        {
                        <span>
                            <img class="img-circle" src="@Url.Content("~/Images/invalid.png")" style="height: 20px"/></span>
                        }
                        else
                        {
                        <span>
                            <img class="img-circle" src="@Url.Content("~/Images/invalid.png")" style="height: 10px"/></span>
                        }
                    }
                    }
                </td>
            </tr>
                }
                // Matching.
                if (question.QuestionTypeId == 3)
                {
            <tr>
                <td>
                    @{
                    answerNo++;
                        <span>@answerNo) </span>
                    }
                    <div style="display: inline-block">
                        <span style="word-wrap: break-word">@Html.Raw(answer.Content)</span>
                    </div>
                    <br />
                    <span style="font-weight: bold">Your selection:</span>
                    @{
                    var q = questionBase.Matches.Where(a => a.MatchId == answer.MatchId).FirstOrDefault();
                    if (q != null)
                    {
                        <span style="word-wrap: break-word">@q.Content</span>
                    }
                    else
                    {
                        <span>No selection</span>
                    }
                    }
                    @{
                    if (answer.Grade > 0)
                    {

                        <span>
                            <img class="img-circle" src="@Url.Content("~/Images/valid.png")" style="height: 20px"/></span>
                    }
                    else
                    {

                        if (q != null)
                        {
                        <span>
                            <img class="img-circle" src="@Url.Content("~/Images/invalid.png")" style="height: 20px"/></span>
                        }
                        else
                        {
                        <span>
                            <img class="img-circle" src="@Url.Content("~/Images/invalid.png")" style="height: 10px"/></span>
                        }
                    }
                    }
                    <br />
                    <span style="font-weight: bold">Correct:</span> <span style="word-wrap: break-word">@(questionBase.Answers.Where(a => a.AnswerId == answer.AnswerId).FirstOrDefault().Match.Content)</span>
                </td>
            </tr>
                }
            }
        }
        <tr>
            <td>
                @{
            double mark = 0;
            foreach (var ans in question.Answers)
            {
                mark += ans.Grade;
            }
                    <span>Mark: @(Math.Round(mark / 100, 2))
                    </span>
                }
            </td>
        </tr>
        <tr>
            <td>
                @if (question.Explanation != null)
                {
                    <span>Explanation:</span>
                    <div style="display: inline-block">
                        <span style="word-wrap: break-word; display">@Html.Raw(question.Explanation)
                        </span>
                    </div>
                }
            </td>
        </tr>
    </table>
        }
        
    <div>
        <table width="100%">
            <tr>
                <td>
                    <div>
                        <span>Page: </span><span id="page">1</span><span>/@ViewBag.totalPage</span>
                    </div>
                    <div id="page-selection">
                    </div>
                    <script>
                            $('#page-selection').bootpag({
                                total: @totalPage,
                                page: 1
                            }).on("page", function (event, num) {
                                goToPage(num, @totalPage);
                                $("#page").html(num);
                                $("#currentPage").val(num);
                            });
                    </script>
                </td>
                <td style="">
                </td>
            </tr>
        </table>
    </div>
    <div style="text-align: center">
        <a href="#top"><< Back to Top >></a>
    </div>
    <br />
    <br />
    }
}
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Report</h3>
    </div>
    <div class="modal-body">
        @using (Ajax.BeginForm("Create", "Report", null, new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "GET",
            UpdateTargetId = "report_content",
        }, new
        {
            @class = "form-inline",
            id = "form_violation"
        }))
        {
            <div id="report_content">
                <input type="hidden" name="questionId" id="vio_questionId" />
                <div style="text-align: center">
                    <input type="text" name="message" pattern=".{5,100}" required placeholder="Message"
                        title="The Message length is 5-100 characters." style="width: 330px" />
                    <button type="submit" value="Send" class="btn">
                        Send</button>
                </div>
            </div>
        }
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            Close</button>
    </div>
</div>
